<template>
  <div class="basicInfo">
    <statisticChart
      v-if="status > 2"
      :statisticData="countResult"
      style="margin-bottom: 20px"
    />
    <el-tabs v-model="editableTabsValue" type="card" :closable="false">
      <el-tab-pane
        v-for="(item, index) in editableTabs"
        :key="index"
        :label="item.deptName"
        :name="item.name"
        lazy
      >
        <component
          :is="item.content"
          :depts="item"
          :static="countResult.organizers"
        ></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { countPlanPackage } from "@/api/productionPlan/overhaulPlanPackage.js";
import planListDetail from "./planListDetail.vue";
import statisticChart from "./statisticChart.vue";
export default {
  props: {
    planList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    status: {
      type: Number,
      default: 2,
    },
  },
  components: {
    planListDetail,
    statisticChart,
  },
  data() {
    return {
      editableTabsValue: "1",
      deptName: "",
      editableTabs: [],
      tabIndex: 0,
      packageId: "",
      countResult: {},
    };
  },
  watch: {
    planList: {
      handler(val) {
        this.init(val);
      },
    },
  },
  created() {
    this.init(this.planList);
  },
  methods: {
    init(val) {
      let arr = JSON.parse(JSON.stringify(val));
      arr.forEach((item, index) => {
        item.name = `${index + 1}`;
        item.content = planListDetail;
      });
      this.packageId = arr[0].packageId;
      this.editableTabs = arr;
      this.getStatisticData();
    },
    //获取统计数据
    getStatisticData() {
      let params = {};
      params.packageId = this.packageId;
      countPlanPackage(params).then((res) => {
        this.countResult = res.data;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.basicInfo {
  width: 100%;
  height: 100%;
  /deep/.el-tabs {
    height: 100% !important;
  }
  /deep/.el-tabs .el-tabs__content {
    height: calc(100% - 81px);
  }
  /deep/.el-tabs .el-tab-pane {
    height: 100%;
  }
}
</style>